<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >郭艾伦半裸走在西班牙街头：夏天快结束了</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:48:01</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">网易体育8月6日报道：</van-col>
                        <van-col span="24" class="article-text">在西班牙随中国男篮集训的郭艾伦晒出两张图片，图中郭艾伦半裸上身，肩挎白色背包走在街头，他配文：夏天快结束了。</van-col>
                        <van-col span="24" class="article-text">相关阅读：</van-col>
                        <van-col span="24" class="article-text">辽宁男篮:希望郭艾伦留下 若获NBA或欧洲合同将全力支持</van-col>
                        <van-col span="24" class="article-text">新华社沈阳8月5日电（记者张逸飞、卢星吉）辽宁男篮俱乐部5日表示，无论郭艾伦去留与否，俱乐部都愿为他提供最佳发展平台。</van-col>
                        <van-col span="24" class="article-text">针对中国男篮职业联赛（CBA）新科冠军辽宁队主力控卫郭艾伦在8月2日通过经纪团队提出的转会申请，辽宁男篮俱乐部表示，希望尽全力留下郭艾伦。</van-col>
                        <van-col span="24" class="article-text">“辽篮能为郭艾伦提供在国内联赛中最好的平台，作为我们自己青训培养的优秀运动员，我们一直非常重视郭艾伦，以他为核心制定全队战术。”</van-col>
                        <van-col span="24" class="article-text">“郭艾伦为辽篮上赛季在CBA夺冠起了重要作用，我们希望他继续成为辽篮未来争冠道路上的重要组成部分。”辽宁男篮俱乐部表示。</van-col>
                        <van-col span="24" class="article-text">辽宁男篮俱乐部还声明了将坚持使用与郭艾伦所签合同中规定的“优先续约权”。</van-col>
                        <van-col span="24" class="article-text">据了解，郭艾伦与辽宁男篮俱乐部所签合同为顶薪合同（D类）。根据CBA主办方公布的《2022-2023赛季CBA联赛球员选秀、工资帽、聘用及交易管理规定》，俱乐部在D类合同到期后继续拥有该球员D类合同独家签约权。如因球员原因拒绝续约，俱乐部仍保留D类合同独家签约权直至俱乐部放弃或转让此权利。</van-col>
                        <van-col span="24" class="article-text">另一方面，辽宁男篮俱乐部在回应中也着重提及，如果郭艾伦能获得美职篮（NBA）或欧洲联赛这样的海外高级别联赛合同，该队将全力支持。</van-col>
                        <van-col span="24" class="article-text">“正如郭艾伦在转会申请中所说，需要给自己更大挑战，‘跳出舒适圈’为接下来的国家队重要比赛储备实力、提升状态。如果能征战NBA或欧洲联赛，将有利于提升他的竞技水平，出于服务国家队的目的，辽篮肯定将全力支持，愿意牺牲掉部分俱乐部利益。”</van-col>
                        <van-col span="24" class="article-text">“一直以来，辽宁体育界包括辽宁男篮都致力于为国家队选拔、培养和输送大量人才，我们希望，并不遗余力地支持着每一位从辽宁走出来的球员持续提升自己，尤其是能为国家队做出更大贡献。辽篮也将坚持这一好的传统。”</van-col>
                        <van-col span="24" class="article-text">辽宁男篮俱乐部最后表示，无论何时，只要郭艾伦愿意在辽篮打球，“母队”大门永远敞开。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
